<template>
	<div class="Info-show">
		<div class="Info-show-warpper">
			<div class="info-header clear">
				<div class="info-add pull-left" @click="add">
					<Button type="success">新增文档</Button>
				</div>
			</div>
			<div class="info-table">
				<info-table 
					ref="info-table"
					:thead="thead" 
					:tbody="tbody"
					:total="total"></info-table>
			</div>
		</div>
		
		<info-modal 
			ref="action-modal"
			class="document-action-modal"
			:title="actionTitle">
			<div class="document-form" v-if="sysList.length">
				<Form 
					ref="form" 
					:model="formItem" 
					:rules="rules"
					:label-width="80">
					<Row>
						<Col span="12">
							<FormItem label="文档描述" prop="fileName">
					            <Input v-model="formItem.fileName" class="action-Input"></Input>
					        </FormItem>
						</Col>
						<Col span="12">
							<FormItem label="所属系统" prop="appNames">
								<Select v-model="formItem.appNames" multiple class="action-Input">
							        <Option v-for="item in sysList" :value="item.id">{{ item.appName }}</Option>
							   	</Select>
					        </FormItem>
						</Col>
					</Row>
			        <FormItem label="接口路径" prop="filePath">
			        	<Upload
					        type="drag"
					        :action="`${httpUrl}/file/upload`"
					        :headers="uploadHeader"
					        :default-file-list="uploadDefault"
					        :on-success="uploadSuccess">
					        <div style="padding: 20px 0">
					            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
					            <p>点击或将文件拖拽到这里上传</p>
					        </div>
					    </Upload>
			        </FormItem>
			        <FormItem label="备注" prop="remark">
			            <Input type="textarea" v-model="formItem.remark"></Input>
			        </FormItem>
			        <FormItem>
			            <Button type="primary" @click="commitForm">提交</Button>
			            <Button type="ghost" @click="resetForm" style="margin-left: 8px">重置</Button>
			        </FormItem>
				</Form>
			</div>
		</info-modal>
		
		<warn-modal 
			title="警告" 
			message="确定要删除该接口？" 
			ref="del-warn"
			@sure="delCommit"></warn-modal>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin } from 'common/js/mixins';
	import { DocumentThead } from 'common/js/table';
	import { DocumentRule } from 'common/js/rules';
	import { successNotice, errorNotice } from 'common/js/dom';
	import { httpUrl, options, ERR_OK } from 'api/config';
	import { getList, updateList, deleteList } from 'api/Document';
	import { getSysList } from 'api/Application';
	
	export default {
		mixins: [loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin],
		created() {
			this.httpUrl = httpUrl;
			this.uploadHeader = options().headers;
			this._getList();
			this._getSysList();
		},
		data() {
			return {
				uploadDefault: [],
				sysList: [],
				formItem: {
					id: '',
					fileName: '',
					appNames: [],
					filePath: '',
					remark: ''
				},
				rules: DocumentRule(),
				actionTitle: '',
				thead: DocumentThead(this),
				tbody: [],
				total: 0,
				showLoading: false
			}
		},
		methods: {
			down(row) {
				window.open(`${httpUrl}${row.filePath}`, '_blank');
			},
			uploadSuccess(res) {
				if (res.code === ERR_OK) {
					this.formItem.filePath = res.msg
				}
			},
			add() {
				this.resetForm();
				this.actionTitle = '新增文档';
				this.$refs['action-modal'].showModal();
			},
			edit(row) {
				this.formItem = row;
				this.uploadDefault = [{
                    'name': row.filePath,
                    'url': `${httpUrl}${row.filePath}`
                }]
				this.actionTitle = '修改文档';
				this.$refs['action-modal'].showModal();
			},
			commitForm() {
				this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this._updateList(this.formItem);
                    }
                })
			},
			del(row) {
				this.formItem = row;
				this.$refs['del-warn'].showModal();
			},
			delCommit() {
				this._deleteList(this.formItem.id)
			},
			resetForm() {
				this.formItem.id = '';
				this.uploadDefault = [];
				this.$refs['form'].resetFields();
			},
			_deleteList(id) {
				this.showLoading = true;
				deleteList(id)
					.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['del-warn'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_updateList(obj) {
				this.showLoading = true;
				updateList(obj)
                	.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['action-modal'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getList(page) {
				this.showLoading = true;
				getList(page)
					.then(res => {
						this.tbody = res.rows;
						this.total = res.total;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getSysList() {
				this.showLoading = true;
				getSysList()
					.then(res => {
						this.sysList = res;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			}
		}
	}
</script>

<style lang="scss">
	.document-action-modal {
		.ivu-modal {
			width: 700px;			
		}
		.document-form {
			width: 550px;
			margin: 0 auto;
		}
	}
</style>